<template>
  <ul class="footer">
    <li>
      <router-link to="/home" active-class="active">
        <i class="iconfont icon-shouye"></i>首页
      </router-link>
    </li>
    <li>
      <router-link to>
        <i class="iconfont icon-fenlei"></i>分类
      </router-link>
    </li>
    <li>
      <router-link to="/find" active-class="active">
        <i class="iconfont icon-faxian"></i>发现
      </router-link>
    </li>
    <li>
      <router-link to>
        <i class="iconfont icon-gouwuche"></i>购物车
      </router-link>
    </li>
    <li>
      <router-link to>
        <i class="iconfont icon-wode"></i>
        我的
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {

}
</script>

<style scoped>
.footer {
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  padding: 0 24px;
  background: #f1f3f5;
  display: flex;
  position: fixed;
  bottom: 0;
}
.footer li {
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer li a {
  font-size: 12px;
  color: #a7a8aa;
  display: flex;
  align-items: center;
}
.footer li a i {
  color: #606162;
  font-size: 24px;
  margin-right: 8px;
}
.footer li .active {
  color: red;
  font-weight: 700;
}
.footer li .active i {
  color: red;
}
</style>